import { AbstractAccordion, Paragraph } from "@/components";
import { navigateTo, switchTab } from "@/utils/navigation";
import Taro from "@tarojs/taro";
import { View, Image } from "@tarojs/components";
import style from "./index.module.scss";
import { AccordionPayloadShape } from "@/data/shared/entityShapes";

type AccordionProps = AccordionPayloadShape & {
  img?: string;
};



const Accordion = ({ title, content, img }: AccordionProps) => {
  const handleImageClick = () => {
    const urls = [img]; // 将 img 属性放入 urls 数组中
    Taro.previewImage({
      urls,
      current: img,
    });
  };
  return (
    <AbstractAccordion title={title}>
      {img && <Image className={style["img"]} mode="widthFix" src={img} onClick={handleImageClick} />}
      {content.map((textOrLink, textOrLinkIdx) => {
        switch (textOrLink.type) {
          case "text":
            return <Paragraph key={textOrLinkIdx}>{textOrLink.text}</Paragraph>;
          case "inline-text":
            return (
              <Paragraph key={textOrLinkIdx} style={{ display: "inline" }}>
                {textOrLink.text}
              </Paragraph>
            );
          case "inline-link":
            return (
              <View
                key={textOrLinkIdx}
                className={style.link}
                onClick={() => {
                  switch (textOrLink.linkData.type) {
                    case "navigate":
                      navigateTo(textOrLink.linkData.link);
                      break;
                    case "tab":
                      switchTab(textOrLink.linkData.link);
                      break;
                  }
                }}
              >
                {textOrLink.text}
              </View>
            );
        }
      })}
    </AbstractAccordion>
  );
};

export default Accordion;
